<template>
    <div>
        <Card>
            <span slot="title">管理员信息</span>
            <div slot="content">
                <div>管理员ID：&emsp;&emsp;{{ accountInfo.id }}</div>
                <el-divider></el-divider>
                <div>账号：&emsp;&emsp;{{ accountInfo.account }}</div>
                <el-divider></el-divider>
                <div>用户组：&emsp;&emsp;{{ accountInfo.userGroup }}</div>
                <el-divider></el-divider>
                <div>创建时间：&emsp;&emsp;{{ accountInfo.ctime | timer }}</div>
                <el-divider></el-divider>
                <div class="avatar">
                    <span>管理员头像：&emsp;&emsp;</span>
                    <!-- 上传头像 -->
                    <el-upload
                        :show-file-list="false" 
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                        class="avatar-uploader"
                        action="http://127.0.0.1:5000/users/avatar_upload"
                    >
                        <img v-if="imgUrl" :src="baseUrl + imgUrl" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </div>
                <el-button type="primary" @click="up">修改头像</el-button>
            </div>
        </Card>
    </div>
</template>

<script>
import local from "@/utilis/local.js";
import Card from "@/components/Card.vue";
import moment from "moment";
import { avatarUp } from "@/apis/acc.js";

export default {
    components: {
        Card,
    },
    data() {
        return {
            accountInfo: {},
            imgUrl: "",
            // 默认图片地址
            baseUrl: "http://127.0.0.1:5000/upload/imgs/acc_img/",
        };
    },
    methods: {
        // 上传成功的回调函数
        handleAvatarSuccess(res) {
            let { code, msg, imgUrl } = res;
            if(code == 0){
                this.imgUrl = imgUrl;
                this.$message({
                    message: msg,
                    type:"success"
                })
            }else{
                this.$message.error(msg)
            }
        },
        // 获取本地存储的用户信息
        getInfo(){
            this.accountInfo = JSON.parse(local.getItem("infoList"));
        },

        beforeAvatarUpload() {},
        // 头像上传提交按钮
        async up() {
            let { code } = await avatarUp({imgUrl: this.imgUrl});
            if(code == 0){
                // 中介传参
                this.$bus.$emit("imgUrl");
            }
        },
    },
    // 生命周期
    created() {
        this.getInfo();
    },
    // 过滤
    filters:{
        timer(val){
            return moment(val).format("YYYY-MM-DD HH:mm:ss")
        }
    }
};
</script>

<style lang="less" scoped>
.avatar {
    display: flex;
    align-items: center;
    /deep/.avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }
    .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
}
.el-button {
    margin-top: 15px;
    
}
</style>